const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require("vue-loader");
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');

module.exports = {
  // devtool: 'source-map',
  // mode: 'production',
  entry: {
    index: path.resolve(__dirname, './src/main.js'),
  },
  performance: {
    hints: false, // 如果一个资源超过250kb，webpack会进行输出一个警告来通知你
  },
  output: {
    publicPath: '', //静态文件目录
    path: path.resolve(__dirname, './dist/'),
    filename: '[name].[hash].js'
    // hash依赖文件同一个hash(项目修改文件都会修改),
      // contenthash一个文件对应一个名字(文件修改才会修改), css用
      // chunkhash文件会共用chunkhash,内容没有更新就不会重新构建(依赖更新了也会改变), js用
    // 配置这个不然热更新会找不到内存中对应的文件(多页面也有相关的配置)
    // 也有利于进行资源持久化缓存(webpack会通过文件内容去计算hash值,文件没有改变的话下次打包hash值不会变,便于浏览器缓存)
  },
  module: {
    rules: [
      {
        test: /\.(vue)$/,
        use: 'vue-loader'
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          // options: {
          //   presets: [
          //     ['@babel/preset-env', { targets: "defaults" }]
          //   ],
          //   plugins: ["@babel/plugin-proposal-optional-chaining"]
          // }
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [ //顺序要对
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // esModule: false,
            },
          },
          // 'style-loader',
          {
            loader: 'css-loader',
            options: {
              import: true,
              url: true
            }
          },
          'sass-loader'
        ],
      }
    ]
  },
  devServer: {
    contentBase: false,
    hot: true, //开启热更替
    host: '127.0.0.1',
    port: 8080, //自定义端口
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, './public/index.html'),
    }),
    new CleanWebpackPlugin(), //清除上次打包的文件,和dll动态链接库配合使用要将dll生成到非输出路径
    new CopyWebpackPlugin({ //使引入的静态文件可以起作用
      patterns: [{
        from: path.resolve(__dirname, './public'),
        to: path.resolve(__dirname, './dist')
      }]
    })
  ]
}